<template>
	<view class="">
		<view class="content" v-if="false">
			<button type="default" @click="startPreview">开启本地预览</button>
			<button type="default" @click="joinChannel">加入频道</button>
			<button type="default" @click="publish">开始推流</button>
			<button type="default" @click="unPublish">取消推流</button>
			<button type="default" @click="onPublisher">推流回调</button>
			<button type="default" @click="subscribe">订阅和显示远程流</button>
			<button type="default" @click="leaveChannel">离开频道</button>
			<video src="" controls id='video' ref='video'></video>
		</view>
		<view class="warps">
			<video src="" controls :autoplay='true' :enable-progress-gesture='false' :show-center-play-btn='false'
				:controls='false' :play-btn-position='false' show-fullscreen-btn='false' class="video_user" id='video'
				ref='video'></video>
			<view class="video_head " :style="{'margin-top':CustomBar+'rpx'}">
				<view class="one_overflow rowsb padding-lr align-center">
					<view class="head_left align-center  rowsb padding-lr">
						<view>
							<view class="title">标题标题</view>
							<view class="align-center">
								<image src="/static/video/imgdingwei.png" class="icon"></image>
								<text>距离</text>
							</view>
						</view>
						<view>
							<image src="/static/video/imgjiahaoyou.png" class="icon"></image>
						</view>
					</view>
					<image src="/static/video/imgshengluehao.png" class="head_right" @click="isPlugins = !isPlugins">
					</image>
				</view>
				<view class="pop_plugins  animation-scale-up" v-if="isPlugins">
					<view class="sanjiao"></view>
					<view v-for="(item,index) in popList" :key="index" @click.stop>
						<view class="text-black align-center padding-left " style="width: 100%; height: 90rpx;">
							<image :src="item.icon" mode="" class="icon justify-start"></image>
							<view class="margin-left-sm">{{item.title}}</view>
						</view>
					</view>
				</view>
				<view>
					<view class="flex padding">
						<image src="/static/video/imgqian.png" class="icon"></image>
						<view class="margin-left-sm">
							<view class="">
								累计奖励：200元
							<view class=" text-sm margin-top-sm">
								10：22：22
							</view>
						</view>
					</view>
				</view>
			</view>
			<view @touchstart.stop="WraptouchStart" @touchmove.stop="WraptouchMove" @touchend.stop="WraptouchEnd"
				@touchmove.stop.prevent>
				<video src="" controls class="flex_video" id='video2' ref='video2' :show-fullscreen-btn='false'
					:enable-progress-gesture='false' :play-btn-position='false' :show-center-play-btn='false'
					:controls='false' poster='https://img1.baidu.com/it/u=3755297117,609162545&fm=26&fmt=auto'
					:style="{top: imageObject.top + 'px',left: imageObject.left + 'px'}"></video>
			</view>
			<view class="bottom_fixed">
				<view class="justify-end padding-right" @click="isPopBody = !isPopBody">
					<image src="/static/video/imgchahao.png" style="width: 50rpx;height: 50rpx;"></image>
				</view>
				<view class="rowsb  align-center padding">
					<image src="/static/video/imgfanyi.png" class="bottom_icon" @click="reverse()"></image>
					<image src="/static/video/imgyinhangk.png" class="bottom_icon" @click="consumer()"></image>
					<image src="/static/video/imgmeiyan.png" class="bottom_icon2" @click=""></image>
					<image src="/static/video/imgyuan.png" class="bottom_icon" @click=""></image>
					<image src="/static/video/imgli.png" class="bottom_icon" @click="gift()"></image>
				</view>
			</view>
			<view class="pop_body align-center rowsc animation-fade" v-if="isPopBody">
				<view class="text-center margin-bottom-xl">马上就接听了，确定不再等等？</view>
				<view class="rowsb text-center" style="position: absolute;bottom: 0;">
					<view class="pop_bottom_l" @click="closeVideo">不等了</view>
					<view class="pop_bottom_r" @click="isPopBody = !isPopBody">再等等</view>
				</view>
			</view>
		</view>





	</view>
</template>

<script>
	var startChat = '/chat/startChat' //发起视频聊天
	var cancelChat = '/chat/cancelChat' //取消聊天
	var finishChat = '/chat/finishChat' //结束聊天
	import 'aliyun-webrtc-sdk'
	var aliWebrtc = new AliRtcEngine();
	var obj = {}
	export default {
		data() {
			return {
				imageObject: {
					lx: 0, //滑动开始的x
					ly: 0, //滑动开始的y
					top: 100,
					left: 240,
				},
				isPlugins: false, //是否显示顶部弹窗
				isPopBody: false, //是否显示中间弹窗

				popList: [{
						icon: '/static/video/imgxiangji-6.png',
						title: '翻转',
						id: 1
					},
					{
						icon: '/static/video/imgjubao.png',
						title: '举报',
						id: 2
					},
					{
						icon: '/static/video/imglahei.png',
						title: '拉黑',
						id: 3
					},
					{
						icon: '/static/video/imgshezhi.png',
						title: '语言设置',
						id: 4
					},
					{
						icon: '/static/video/mohu.png',
						title: '摄像头模糊',
						id: 5
					},
				],
				userId: '1451488398662205442', //用户id
				categoryId: '1451804278000537602', //分类id
				url: 'http://192.168.1.200:8010/api', //域名
				initData: {}, //视频通话参数
			}
		},
		onLoad(option) {
			if (option.url) {
				this.url = option.url
				this.userId = option.userId
				this.categoryId = option.categoryId
			}
			this.startChat()
			let _this = this
			obj = this.imageObject
			aliWebrtc.isSupport().then((res) => {
				// console.log('[支持webrtc]');
				_this.startPreview()
			}).catch((error) => {
				console.log('[不支持webrtc]');
			})



		},
		computed: {
			HEIGHT() {
				return uni.getSystemInfoSync().screenHeight
			}
		},
		methods: {
			//反转
			reverse() {

			},
			//充值消费
			consumer() {

			},
			//礼物
			gift() {

			},

			//视频通话关闭
			closeVideo() {
				aliWebrtc.leaveChannel().then((r) => {
					this.show('离开频道成功')
					this.isPopBody = false //关闭弹窗
					this.POST(cancelChat, {
						id: this.initData.chatId
					}) //取消视频通话接口
				}, (error) => {
					console.log(error.message);
				});
			},

			// 发起视频聊天接口
			startChat() {
				let data = {
					userId: this.userId, //我的用户id
					categoryId: this.categoryId, //分类id
				}
				this.POST(startChat, data).then(res => {
					if (res.code == 0) {
						this.initData = res.data
						this.joinChannel() //加入频道
					} else {
						this.show(res.msg)
					}
				})
			},
			//失败弹窗
			show(text) {
				uni.showToast({
					title: text,
					icon: 'none'
				})
			},


			//接口封装
			POST: function(url, data, showLoads) {
				let urls = this.url + url
				// console.log(urls);

				return new Promise((resolve, reject) => {
					uni.request({
						url: urls, //请求地址 url
						method: 'POST', //请求格式 method POST GET
						data: data, //请求参数 data
						header: {
							// 'content-Type': 'application/x-www-form-urlencoded',
							'Content-Type': 'application/json;charset=utf-8'
						},
						success: (res) => {

							resolve(res.data)

						},
						fail: (err) => {
							reject(err)
						},
						complete(eve) {
							uni.hideLoading()
						}
					})
				})
			},

			//图片滑动开始
			WraptouchStart(e) {
				let objs = e.touches[0]
				obj.lx = objs.clientX;
				obj.ly = objs.clientY;
				this.imageObject = obj;
			},
			//图片滑动中
			WraptouchMove(e) {
				let objs = e.touches[0]
				let x = obj.x;
				let y = obj.y;
				obj._lx = objs.clientX; //当前滑动时候得到的x
				obj._ly = objs.clientY; //当前滑动时候得到的x
				obj.left += obj._lx - obj.lx; //x轴
				obj.top += obj._ly - obj.ly; //y轴
				//做存储，为下一帧滑动做准备
				obj.lx = objs.clientX;
				obj.ly = objs.clientY;
				this.imageObject = obj;
			},
			//滑动结束触发
			WraptouchEnd(e) {
				// console.log('[滑动结束]', obj);
			},

			//开启本地预览
			startPreview() {
				// let video = document.getElementById("video1")
				var video = document.querySelector('video');
				video.style.height = '100%'
				video.style.width = '100%'
				// console.log(video);
				aliWebrtc.startPreview(
					video // html中的video元素
				).then((res) => {
					// console.log('[res]', res);
					//预览成功 
				}).catch((error) => {
					console.log('[预览失败]', error);
					// 预览失败
				});
			},
			//加入频道
			joinChannel() {
				let t = this
				// appkey='0f4930426ca1072d40e3d547095a5ecc'
				let data = {
					userid: this.initData.userid, // 用户ID，只能由数字、字母、下划线组成
					channel: this.initData.chatId, // 频道
					appid: this.initData.appid, // 应用ID
					nonce: this.initData.nonce, // 随机码
					timestamp: this.initData.timestamp, // 时间戳
					gslb: this.initData.gslb, // gslb服务地址
					token: this.initData.token, // 令牌
				}
				console.log('[加入频道参数]', data);
				aliWebrtc.joinChannel(data).then((res) => {
					// console.log('加入频道成功', );
					aliWebrtc.publish().then(() => {
						t.show('生成本地视频流')
						t.setDisplayRemoteVideo()
					}, (error) => {
						// console.log(error.message);
					});
				}, (error) => {
					console.log('[打印错误内容，可以看到失败原因]', error.message);
				});
			},
			//推流 默认推摄像头和麦克风流
			publish() {
				aliWebrtc.publish().then((res) => {
					console.log('[推流成功]', res);
				}, (error) => {
					// console.error(error.message);
				});
			},
			//取消推流
			unPublish() {
				aliWebrtc.unPublish().then((res) => {
					console.log('[取消推流成功]', res);
				}, (error) => {
					console.log(error.message);
				});
			},
			//预览
			setDisplayRemoteVideo() {
				var video = document.querySelector('#video2 video');
				let urls = aliWebrtc.setDisplayRemoteVideo(this.initData.userid, video, 1)
				console.log('[video]', urls);
				this.show(urls)
			},

			//离开频道
			leaveChannel() {
				aliWebrtc.leaveChannel().then((res) => {
					console.log('[离开频道]', res);
				}, (error) => {
					console.log(error.message);
				});
			},





		}
	}
</script>

<style lang="scss">
	page {
		background-color: black;
	}

	// 视频头部
	.video_head {
		color: white;
		position: fixed;
		width: 100%;

		.icon {
			width: 40rpx;
			height: 40rpx;
		}

		.head_left {
			width: 250rpx;
			height: 120rpx;
			border-radius: 60rpx;
			background-color: rgba(0, 0, 0, 0.3);

			.title {
				width: 128rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				opacity: 1;
			}

		}

		.head_right {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;

		}

		//功能弹窗
		.pop_plugins {
			width: 257rpx;
			height: 450rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 10rpx;
			position: absolute;
			z-index: 9999;
			right: 30rpx;

			.sanjiao {
				width: 0;
				height: 0;
				border-left: 28rpx solid transparent;
				border-right: 28rpx solid transparent;
				border-bottom: 50rpx solid white;
				position: absolute;
				top: -20rpx;
				right: 10rpx;
			}
		}
	}

	.video_user {
		height: 100%;
		width: 100%;
		position: fixed;
		z-index: -1;
	}

	//动态移动video
	.flex_video {
		width: 230rpx;
		height: 270rpx;
		position: fixed;
	}

	.bottom_fixed {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;



		.bottom_icon {
			width: 80rpx;
			height: 80rpx;
		}

		.bottom_icon2 {
			width: 150rpx;
			height: 150rpx;
		}
	}

	.warps {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	//中间弹出层，确认和取消
	.pop_body {
		width: 553rpx;
		height: 320rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 0 auto;
		position: relative;
		top: 500rpx;

		.pop_bottom_l {
			width: 276rpx;
			height: 96rpx;
			text-align: center;
			line-height: 96rpx;
			opacity: 1;
		}

		.pop_bottom_r {
			width: 276rpx;
			height: 96rpx;
			background: #EAA019;
			line-height: 96rpx;
			color: white;
			border-radius: 0rpx 0rpx 12rpx 0rpx;
		}
	}
</style>
